import React, { useRef } from "react";
import stys from "./car-risk-moneny.module.scss";

import XxtvCard from "../card/xxtv-card";
import AntdProgress from "@/antd/Progress/Porgress";
import XxTableModal from "../xx-tableModal/xx-tableModal";


const ProgressInfo = ({ percent = 72 }) => {
    return (
        <>
            <div className={stys.progressContent}>
                <div className="item value">
                    <span className="text">{percent}</span>
                    <span className="prent">%</span>
                </div>
                <div className="item label">达成率</div>
            </div>
        </>
    )
}

const CarRiskMomenyModel = ({
    style,
    prentParams,
    carSumPremium = 0.00, // 车险保费
    newCarSumPremium = 0.00, // 新保保费（车险）
    renewalCarSumPremium = 0.00, // 续保保费（车险）
    reinsurCarSumPremium = 0.00, // 转保保费（车险）
    targetCarSumPremium = 0.00 // 目标保费（车险）
}) => {





    const modRef = useRef();

    const ActionElementBtn = () => {
        return (
            <>
                <div
                    className={stys.actionBtn}
                    onClick={() => modRef.current.initModal({
                        listViewProps: {
                            menuCode: "carDealerPolicy",
                            hideActionPanel: true,
                            prentParams: {
                                ...prentParams,
                                pageSize: 20
                            },
                            hideSearchPanel: true,
                            upDoubleClick: () => { },
                        },
                        modalProps: {
                            title: "保费清单",
                            width: 1200,
                        }

                    })} >查看清单</div>
            </>
        )
    }

    return (
        <>
            <XxTableModal onRef={modRef} />
            <XxtvCard
                title="车险保费（万元）"
                style={{ ...style }}
                ActionElement={<ActionElementBtn />}
            >
                <div className={stys.box}>
                    <div className="circle-box">
                        <AntdProgress
                            size={[180, 20]}
                            percent={targetCarSumPremium === 0 ? 0.00 : (carSumPremium / targetCarSumPremium * 100).toFixed(2)}
                            strokeLinecap="round"
                            format={() => <ProgressInfo
                                percent={targetCarSumPremium === 0 ? 0.00 : (carSumPremium / targetCarSumPremium * 100).toFixed(2)}
                            />}
                        />
                    </div>
                    <div className="content">
                        <div className="top">
                            <div className="text-item">
                                <div className="text-content">
                                    <div className="value">{carSumPremium.toFixed(2)}</div>
                                    <div className="label">实际保费</div>
                                </div>
                            </div>
                            <div className="text-item">
                                <div className="text-content">
                                    <div className="value">{targetCarSumPremium.toFixed(2)}</div>
                                    <div className="label">目标保费</div>
                                </div>
                            </div>
                        </div>
                        <div className="bottom">
                            <div className="info-item">
                                <span className="icon color1"></span>
                                <span className="label">新保保费：</span>
                                <span className="label">{newCarSumPremium.toFixed(2)}</span>
                            </div>
                            <div className="info-item">
                                <span className="icon color2"></span>
                                <span className="label">续保保费：</span>
                                <span className="label">{renewalCarSumPremium.toFixed(2)}</span>
                            </div>
                            <div className="info-item">
                                <span className="icon color3"></span>
                                <span className="label">转保保费：</span>
                                <span className="label">{reinsurCarSumPremium.toFixed(2)}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}
export default CarRiskMomenyModel;